<template>
  <div class="all-nav">
    <div class="container">
      <h2 class="all">全部商品分类</h2>
      <nav>
        <a href="##">服装城</a>
        <a href="##">美妆馆</a>
        <a href="##">尚品汇超市</a>
        <a href="##">全球购</a>
        <a href="##">闪购</a>
        <a href="##">团购</a>
        <a href="##">有趣</a>
        <a href="##">秒杀</a>
      </nav>
      <div class="all-nav-list">
        <div class="sort-list">
          <div class="sort-list-item" v-for="(item,index) in navlist" :key="index" >
            <h3>{{item.categoryName}}</h3>
            <div class="sort-list-content" >
              <dl class="fore" v-for="(itemchild,index) in item.categoryChild" :key="index">
                <dt>
                  <a href="">{{ itemchild.categoryName }}</a>
                </dt>
                <dd  >
                  <em v-for="(categoryChild,index) in itemchild.categoryChild" :key="index">
                    <a href="">{{ categoryChild.categoryName }}</a>
                  </em>
                </dd>
              </dl>
            </div>
          </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import {getnav} from "@/api/request";
export default {
  name: "TypeNav",
  data(){
    return {
      navlist:[],
    }
  },
  mounted() {
    this.getNavList();
  },
  methods:{
    getNavList(){
      getnav().then((res)=>{
        console.log(res.data);
        var data=res.data;
        if(data.code===200){
          this.navlist=data.data;
        }
      })
    }
  }
}
</script>

<style lang="less">
.all-nav{
  border-bottom: 2px solid #ea4a36;
  .container{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
  }
  .all{
    width: 210px;
    height: 45px;
    background-color: #e1251b;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
  nav{
    a{
      text-decoration: none;
      height: 45px;
      margin: 0 22px;
      line-height: 45px;
      font-size: 16px;
      color: #333;
    }
  }
  .all-nav-list{
    left: 0;
    top: 55px;
    width: 210px;
    height: 461px;
    position: absolute;
    background: #fafafa;
    z-index: 3;
  .sort-list{
  h3{
    font-size: 14px;
  }
  .sort-list-content{
    display: none;
    position: absolute;
    top: 15px;
    left: 210px;
    width: 740px;
    height: 435px;
    background-color: #f7f7f7;
    dl {
        border-top: 1px solid #eee;
        padding: 6px 0;
        overflow: hidden;
        zoom: 1;
        a{
          font-size: 12px;
          color: #333;
          text-decoration: none;
        }
        &.fore {
          border-top: 0;
        }

        dt {
          float: left;
          width: 54px;
          line-height: 22px;
          text-align: right;
          padding: 3px 6px 0 0;
          font-weight: 700;
        }

        dd {
          float: left;
          width: 415px;
          padding: 3px 0 0;
          overflow: hidden;

          em {
            float: left;
            height: 14px;
            line-height: 14px;
            padding: 0 8px;
            margin-top: 5px;
            border-left: 1px solid #ccc;
          }
        }
      }

  }
  & :hover{
      .sort-list-content{
        display: block;
      }
    }
  }

  }
}
</style>